
import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { FormData,WidgetItem } from '@/components/FormDesigner/types';

import CfgGrid from './_grid/cfg-grid'
import CfgCollapse from './_collapse/cfg-collapse'
import CfgCard from './_card/cfg-card'
import CfgInput from './input/cfg-input'
import CfgDatepicker from './datepicker/cfg-datepicker'
import CfgDaterange from './daterange/cfg-daterange'
import CfgCheckbox from './checkbox/cfg-checkbox'
import CfgRadio from './radio/cfg-radio'
import CfgSelect from './select/cfg-select'
import CfgImage from './image/cfg-image'
import CfgButton from './button/cfg-button'
import CfgDivider from './divider/cfg-divider'
import CfgTextarea from './textarea/cfg-textarea'
import CfgNumber from './number/cfg-number'
import CfgTimepicker from './timepicker/cfg-timepicker'
import CfgTimerange from './timerange/cfg-timerange'
import CfgSwitch from './switch/cfg-switch'
import CfgRate from './rate/cfg-rate'
import CfgSlider from './slider/cfg-slider'
import CfgUpload from './upload/cfg-upload'

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class FdnWidgetConfig extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem:{}
  }

  render() {
    const { formData,widgetItem } = this.props;

    let widget = null;
    if(widgetItem){
      if(widgetItem.type==='GRID'){
        widget = <CfgGrid formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='COLLAPSE'){
        widget = <CfgCollapse formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='CARD'){
        widget = <CfgCard formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='BUTTON'){
        widget = <CfgButton formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='DIVIDER'){
        widget = <CfgDivider formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='INPUT'){
        widget = <CfgInput formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='TEXTAREA'){
        widget = <CfgTextarea formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='NUMBER'){
        widget = <CfgNumber formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='RADIO'){
        widget = <CfgRadio formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='CHECKBOX'){
        widget = <CfgCheckbox formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='SELECT'){
        widget = <CfgSelect formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='TIMEPICKER'){
        widget = <CfgTimepicker formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='TIMERANGE'){
        widget = <CfgTimerange formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='DATEPICKER'){
        widget = <CfgDatepicker formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='DATERANGE'){
        widget = <CfgDaterange formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='SWITCH'){
        widget = <CfgSwitch formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='RATE'){
        widget = <CfgRate formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='SLIDER'){
        widget = <CfgSlider formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='IMAGE'){
        widget = <CfgImage formData={formData} widgetItem={widgetItem} />
      }else if(widgetItem.type==='UPLOAD'){
        widget = <CfgUpload formData={formData} widgetItem={widgetItem} />
      }
    }
    return widget;
  }
}